import React, {useContext, useState, useEffect} from "react";

const UserContext = React.createContext();
const { Provider, Consumer } = UserContext;


function Context() {

    const [name, setName] = useState('Mike');

    useEffect(() => {
        const timer = setTimeout(() => setName('Millet'), 1000);
        return () => clearTimeout(timer);
    }, []);

    const logout = () => {
        setName('');
    }

    return (
        <>
            <Provider value={{name, logout}}>
                {/* <Consumer>{value => <a>{value.name}</a>}</Consumer> */}
                <Children />
            </Provider>
        </>
    );
}

function Children() {
    const { name, logout } = useContext(UserContext);

    return(
        <>
            <h3>Children</h3>
            <a>{name}</a>
            <button onClick={logout} style={{transform: 'rotate(60deg)'}}>
                注销
            </button>
        </>
    )
}


export default Context;